
<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form"  :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">

                        <a-form-model-item  :label="i18n('form.name','名称')" prop = "name">
                            <a-input :placeholder="i18n('form.name','名称','input')" v-model="mdl.name"/>
                        </a-form-model-item>

                        <a-form-model-item  :label="i18n('form.status','状态')" prop = "status">

                            <a-radio-group  v-model="mdl.status" :default-value="1">
                                <a-radio :value="1">{{i18n('form.enable','启用')}}</a-radio>
                                <a-radio :value="0">{{i18n('form.disable','停用')}}</a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                        <a-form-model-item  :label="i18n('form.type','类型')" prop = "type">
                            <a-select :options="typeMap" v-model="mdl.type"></a-select>

                        </a-form-model-item>

                        <a-form-model-item  label="SQL"  v-if="mdl.type=='sql'">
                            <div style="text-align: right;">
                                <a-button-group>
                                    <a-button icon="plus" @click="add()"></a-button>
                                    <a-button icon="up" @click="up"></a-button>
                                    <a-button icon="down" @click="down"></a-button>
                                    <a-button icon="delete" @click="delIndex()"></a-button>
                                </a-button-group>
                            </div>

                            <table class="jobTaskTable" style="width: 100%;">
                                <tr>
                                    <th style="width: 60px;">#</th>
                                    <th style="width: 200px;">{{i18n('form.dataSource','数据源')}}</th>
                                    <th>SQL</th>
                                </tr>
                                <tr v-for="(item,index) in sqlList" :key="item.idx_">
                                    <td>
                                        <a-checkbox v-model="item.selected"></a-checkbox>
                                    </td>
                                    <td >
                                        <a-input-group compact>
                                            <a-input v-model="item.alias" style="width: 120px;" ></a-input>
                                            <a-button @click="selDataSource(item)">...</a-button>
                                        </a-input-group>
                                    </td>
                                    <td>
                                        <a-textarea v-model="item.sql"
                                                    :auto-size="{ minRows: 3, maxRows: 6 }"
                                        ></a-textarea>
                                    </td>
                                </tr>
                                <tr v-if="sqlList.length==0">
                                    <td colspan="3">
                                        <a-empty />
                                    </td>
                                </tr>
                            </table>

                        </a-form-model-item>

                        <a-form-model-item  :label="i18n('form.script','脚本')" v-if="mdl.type=='script'">
                            <div >
                                <rx-monaco-editor ref="javaCode"
                                                  language="java"
                                                  style="height:270px;"
                                                  v-model="script">
                                    <template v-slot:monacoeditor>
                                        <a-button icon="edit" @click="showScriptDialog()">
                                            {{i18n('list.quickScript','快速脚本')}}
                                        </a-button>
                                    </template>
                                </rx-monaco-editor>
                            </div>

                        </a-form-model-item>

                        <a-form-model-item  :label="i18n('form.processClass','处理类')" v-if="mdl.type=='class'">
                            <a-select :options="allClass" v-model="jobClass"></a-select>
                        </a-form-model-item>
                </a-form-model>


            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import SysJobTaskApi from '@/api/system/core/sysJobTask';
    import {RxDialog,BaseFormModel,RxMonacoEditor,Util,Dialog,GridMixin,JsConstant} from "@lowcode/jpaas-common-lib";
    import AppName from "@/assets/js/AppName.js";
    export default {
        name: 'SysJobTaskEdit',
        mixins:[BaseFormModel,GridMixin,AppName],
        components: {
            RxDialog,
            RxMonacoEditor
        },
        data(){
            return {

                rules: {
                    name: [{ required:true,message:this.i18n('form.name','名称','input'), trigger: 'change' }],
                    type: [{ required:true,message:this.i18n('form.type','类型','select'), trigger: 'change' }]
                },
                typeMap:[{value:"class",label:this.i18n('form.timeClass','定时处理类')},{value:"script",label:this.i18n('form.script','脚本')},{value:"sql",label:"SQL"}],

                jobClass:"",
                sqlList:[],
                script:"",

                allClass:[],
                labelCol: {span: 3},
                wrapperCol: {span: 8},
            }

        },
        created(){
            SysJobTaskApi.getJobHandlers().then(res=>{
                this.allClass=res;
            })

        },
        methods: {
            i18n(name,text,key){
                return this.$ti18(name,text,"SysJobTask",key);
            },
            add(){
                let id=Util.randomId();
                let obj={
                    selected:false,
                    alias:"",
                    sql:""
                }
                this.addRow(this.sqlList,obj)

            },
            get(id){
                return SysJobTaskApi.get(id);
            },
            onload_(data){
                if(!data){
                    this.$set(this.mdl,"status",1);
                    return;
                }
                if(data.type=="sql"){
                    this.sqlList= JSON.parse(data.content)
                }
                if(data.type=="class" ){
                    this.jobClass=data.content;
                }
                if(  data.type=="script"){
                    this.script=data.content;
                }


                this.mdl.status=parseInt(data.status);



            },
            save(){
                let type=this.mdl.type;
                if(type=="sql"){
                    this.mdl.content=JSON.stringify(this.sqlList);
                }
                if(type=="class"){
                    this.mdl.content=this.jobClass;
                }
                if(type=="script"){
                    this.mdl.content=this.script;
                }
                debugger
                return SysJobTaskApi.save(this.mdl);
            },
            selDataSource(item){
                Dialog.openDataSourceDialog({
                    curVm: this, widthHeight: ['800px', '600px'],
                    data: {appName: this.serviceName}
                }, function (self, data) {
                    item.alias=data.alias;
                })
            },
            delIndex(){
                if(this.sqlList.length==0){
                    return;
                }
                for(let i=this.sqlList.length-1;i>=0;i--){
                    let o=this.sqlList[i];
                    if(o.selected){
                        this.sqlList.splice(i,1);
                    }
                }
            },
            getSelectRows(){
                let rows=[];
                for(let i=0;i<=this.sqlList.length-1;i++){
                    let o=this.sqlList[i];
                    if(o.selected){
                        rows.push(o.idx_)
                    }
                }
                return rows;
            },
            up(){
                let rows=this.getSelectRows();
                this.toUp(this.sqlList,rows);
            },
            down(){
                let rows=this.getSelectRows();
                this.toDown(this.sqlList,rows);
            },
            showScriptDialog(){
                let self=this;
                let config={curVm:this};
                Dialog.openScriptDialog(config,function (script){
                    self.$refs.javaCode.insertContent(script);
                })

            },

        }
    }
</script>
<style>
    .relick a{
        margin-right: 10px;
    }
    .jobTaskTable{
        table-layout: fixed;
        line-height: normal!important;
    }
    .jobTaskTable th,
    .jobTaskTable td
    {
        border:1px solid #ddd;
        padding: 6px;

    }
</style>
